<template>
  <!-- Navigation-->
  <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
    <div class="container px-4 px-lg-5">
      <!-- <a class="navbar-brand" href="index.html">Start Bootstrap</a> -->
      <g-link to="/">Start Bootstrap</g-link>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarResponsive"
        aria-controls="navbarResponsive"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ms-auto py-4 py-lg-0">
          <li class="nav-item">
            <!-- <a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a> -->
            <g-link class="nav-link px-lg-3 py-3 py-lg-4" to="/">Home</g-link>
          </li>
          <li class="nav-item">
            <!-- <a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a> -->
            <g-link class="nav-link px-lg-3 py-3 py-lg-4" to="/about">About</g-link>
          </li>
          <li class="nav-item">
            <!-- <a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html"
              >Sample Post</a
            > -->
            <g-link class="nav-link px-lg-3 py-3 py-lg-4" to="/post">Sample Post</g-link>
          </li>
          <li class="nav-item">
            <!-- <a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html"
              >Contact</a
            > -->
            <g-link class="nav-link px-lg-3 py-3 py-lg-4" to="/contact">Contact</g-link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
export default {

}
</script>

<style>
</style>